<template>
    <div class="login-input">
        <div class="input-group">  
            <input :style="'color:'+color" :type="typeText" ref="input"   @input="updateValue($event.target.value)"  :placeholder="placeholder" class="input" :maxlength="maxlength">
            <div class="input-btn text-center" v-if="type=='reg'" >
                <span v-if="disabled" class="reg-btn"  @click="changeIcon">获取验证码</span>
                <span v-else class="reg-btn text-center" >{{second}}s</span> 
            </div> 
        </div> 
    </div>
</template>

<script>

export default {
    props:{ 
        placeholder:{
            type:String,
            default:'请输入'
        },
        type:{
            type:String,
            default:'text'
        },
        value:{
            default:''
        },
        maxlength:{
            default:'60'
        },
        disabled:{
            type:Boolean,
            default:true
        },
        second:{
            default:60 
        },
        color:{ 
            type:String,
            default:'#f4f4f4'
        }
    },
    data(){
        return{
            lookPwd:true,
            typeText:this.type
        }
    },
    methods:{
        updateValue (value){ 
            var formattedValue = value
            // // 如果值尚不合规，则手动覆盖为合规的值
            if (formattedValue !== value) {
              this.$refs.input.value = formattedValue
            }
            // 通过 input 事件带出数值
            this.$emit('input', formattedValue)
        }, 
        changeIcon(){
            this.$emit('send');
        }
    }
}
</script>


<style scoped lang="scss">
  .login-input {
    width:100%;
    .input-group{
        display:flex;
        justify-content:center;
        align-items:Center; 
        padding:0  20rpx; 
        margin-bottom:25rpx; 
        border-bottom:1rpx solid #5E5550; 
        .input{
            flex:1;
            padding-top:20rpx;
            padding-bottom:15rpx; 
            outline: none;
            border: 0;
            font-size:28rpx; 
            height:50rpx;
        }
        .input-btn{
            flex:0 0 200rpx; 
            padding:0 10rpx;
            font-size:27rpx;
            .reg-btn{ 
                color:#fff; 
                background:#CD4640;
                padding:10rpx 20rpx;
                border-radius:10rpx;
                &:active{
                    background-color:rgba(205,70,64,0.5)
                }
            } 
        }
         
    }
  }
</style>
